<!-- 应收费 -->、
<template>
  <div>
    <el-dialog v-model="feeOpen" :close-on-click-modal="false" :title="title">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" @click="handleAdd">增加</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableList"
        border
        height="500px"
        @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column
          label="订单号"
          prop="orderNo"
          align="center"
          width="170"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="费用名称"
          prop="feeName"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="amount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="币种"
          prop="currency"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作人"
          prop="createUser"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作时间"
          prop="createDate"
          align="center"
          width="170"
        ></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="150"
        >
          <template #default="{row}">
            <el-button
              type="primary"
              text
              icon="el-icon-edit"
              @click="handleUpdate(row)"
            >
              修改
            </el-button>
            <el-button
              type="primary"
              text
              icon="el-icon-delete"
              @click="handleDel(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </el-dialog>
    <el-dialog
      v-model="open"
      :before-close="cancel"
      :title="title2"
      append-to-body
    >
      <el-form
        ref="DialogForm"
        :model="form"
        :rules="rules"
        label-width="100px"
        inline
      >
        <el-form-item label="费用名称" prop="feeName">
          <el-select v-model="form.feeName" filterable clearable>
            <el-option
              v-for="dict in dicts[DictDirection.费用名称]"
              :key="dict.feeValue"
              :label="dict.feeName"
              :value="dict.feeName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="form.amount" :controls="false" style="width: 193px;"></el-input>
        </el-form-item>
        <el-form-item label="币种" prop="currency">
          <el-select v-model="form.currency" placeholder="请选择币种">
            <el-option
              v-for="item in currencyOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
// import { Delete, Refresh, Plus, Download, Edit, Document, Calendar, UploadFilled } from '@element-plus/icons-vue'
import { ref, defineAsyncComponent, computed, getCurrentInstance } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { receivableList, addFee, updateFee, deleteFee } from '@/api/expressManager/outSea'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const dicts = useDicts()
dicts.setDicts(DictDirection.费用名称)
const feeOpen = ref(false)
const title = ref(null)
const open = ref(false)
const loading = ref(false)
const title2 = ref(null)
const tableList = ref()
const { proxy } = getCurrentInstance() as any
const DialogForm = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const currencyOptions = ref([
  { value: '人民币', id: 1 },
  { value: '美元', id: 2 },
])
  
const total = ref(null)
const form = ref({
  feeName: '',
  amount: '',
  currency: '',
  transportType: '6',
  orderNo: '',
})
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  total: undefined,
})
const rules = {
  feeName: [
    {
      required: true,
      message: '费用名称不能为空',
      trigger: ['change', 'blur'],
    },
  ],
  amount: [
    {
      required: true,
      message: '金额不能为空',
      trigger: ['change', 'blur'],
    },
  ],
}
const handleSelectChange = () => {}
// 添加
const handleAdd = () => {
  open.value = true
  title2.value = '添加'
}
// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  open.value = true
  form.value.feeName = row.feeName
  form.value.amount = row.amount
  form.value.currency = row.currency
  title2.value = '修改'
  form.value.id = row.id
}
// 删除
const handleDel = (row: { [key: string]: any }) => {
  const id = row.id
  ElMessageBox.confirm('此操作将永久删除该包裹信息, 是否继续?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteFee(id).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        getList()
      }
    })
  })
}
const submit = () => {
  form.value.orderNo = orderNos.value
  $validateForm(DialogForm.value, () => {
    if (title2.value == '添加') {
      addFee(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success('新增成功')
          getList()
          cancel()
        }
      })
    } else {
      updateFee(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success('修改成功')
          getList()
          cancel()
        }
      })
    }
  })
}
const cancel = () => {
  open.value = false
  proxy.$refs[DialogForm].resetFields()
}
const orderNos = ref(null)
const getList = () => {
  const data = {
    orderNo: orderNos.value,
    transportType: 6,
  }
  loading.value = true
  receivableList(data).then(res => {
    if (res.code == 200) {
      tableList.value = res.data
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  getList,
  feeOpen,
  orderNos,
  title,
})
</script>